<template>
  <div id="home">
    <nav-bar>
      <div slot="center">海淘网</div>
    </nav-bar>
    <swiper>
      <SwiperItem v-for="(item, index) in banner" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt="" />
        </a>
      </SwiperItem>
    </swiper>
    <recommend-view :RecommendData="recommends"></recommend-view>
    <Hot></Hot>
    <tab-control
      :title="['热销', '新款', '精选']"
      class="tab-control"
      @tabClick="tabClick"
    ></tab-control>
    <goods-list :goods="goods[currentType].list"></goods-list>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar";
import { getHomeDate, getGoodDate } from "../../network/home";
import Swiper from "../../components/common/swiper/Swiper";
import SwiperItem from "../../components/common/swiper/SwiperItem";
import recommendView from "./recommendView";
import Hot from "./Hot";
import TabControl from "../../components/content/tabControl/TabControl";
import GoodsList from "../../components/content/goods/GoodsList";

export default {
  name: "home",
  components: {
    NavBar,
    Swiper,
    SwiperItem,
    recommendView,
    Hot,
    TabControl,
    GoodsList,
  },
  data() {
    return {
      banner: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
    };
  },
  created() {
    this.getHomeDateBZ(), this.getGoodDateBZ("pop");
    this.getGoodDateBZ("new");
    this.getGoodDateBZ("sell");
  },
  methods: {
    //1、事件监听相关事件
    // tabClick(index){
    //    switch(index){
    //       case 0:
    //          this.currentType = 'pop'
    //          break
    //       case 1:
    //          this.currentType = 'new'
    //          break
    //       case 2:
    //          this.currentType = 'sell'
    //          break
    //    }

    // },
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },

    //2、网络请求相关事件
    getHomeDateBZ() {
      getHomeDate().then((res) => {
        //console.log("home 数据", res);
        (this.banner = res.data.data.banner.list),
          (this.recommends = res.data.data.recommend.list);
      });
    },
    getGoodDateBZ(type) {
      const page = this.goods[type].page + 1;
      getGoodDate(type, page).then((res) => {
        this.goods[type].list.push(...res.data.data.list);
      });
    },
  },
};
</script>

<style scoped>
#home {
  padding-top: 44px;
}
.tab-control {
  position: sticky;
  top: 44px;
}
</style>